<template>
    <div class="page-my-account">
        <div class="info-wrap text-center">
            <div class="question-icon white-color" @click="onClickQuestion"><i class="icon">&#xe60d;</i></div>
            <div class="money">
                <div class="number font-bold">{{accountCurrency}}<span class="normal-text font-normal">元</span></div>
                <div class="normal-text">可提现</div>
            </div>
            <div class="tips normal-text clearfix" v-if="accountRank">
                <div class="fl">我的累积奖励：{{accountRankCurrency.max}}元</div>
                <div class="fr">我的排名：{{accountRankCurrency.rank}}</div>
            </div>
        </div>
        <div class="list-wrap list-item white-bg">
            <SlideNav
                v-model="nav"
                :navigations="navs"
                :container-class="['after-line', 'white-bg']"
                :isScrollIntoView = "false">
            </SlideNav>

            <div class="list-wrap" v-if="nav !== 'withdraw' && list.length">
                <AccountItem v-for="(item, index) in list"
                    :key="index"
                    :avatar="item.avatar ? item.avatar : ''"
                    :nickname="item.nickname? item.nickname : ''"
                    :referrer="item.referrer"
                    :title="item.title"
                    :desc="item.desc ? item.desc : ''"
                    :created-at="item.created_at"
                    :money="item.money"
                    :status="item.status"
                    :nav="nav"
                    :channel="item.channel ? item.channel : ''"
                    :no="item.no ? item.no : ''"
                    :refund="item.refund ? item.refund : ''"
                    :id="item.id"
                    :friendGive="item.transfer_user ? item.transfer_user : '' "
                    :istransfer="item.is_transfer"
                    @onGive="onGive" />
            </div>
            <!-- 提现记录 -->
            <div class="list-wrap" v-else-if="nav === 'withdraw' && list.length">
                <WithdrawDetail v-for="(item, index) in list"
                    :key="index"
                    :avatar="item.avatar ? item.avatar : ''"
                    :nickname="item.nickname? item.nickname : ''"
                    :title="item.title"
                    :desc="item.desc ? item.desc : ''"
                    :created-at="item.created_at"
                    :money="item.money"
                    :status="item.status"
                    :nav="nav"
                    :channel="item.channel ? item.channel : ''"
                    :no="item.no ? item.no : ''"
                    :refund="item.refund ? item.refund : ''"
                    :certificate="item.certificate"
                    :detail="item" />
            </div>
            <ListEmpty v-else />
        </div>
        
        <!-- 提现按钮 -->
        <div class="fixed-btn-wrap white-bg">
            <MobileButton class="btn-red btn-large btn-block btn-round"
                :is-disabled="account == 0"
                @click="onClickWithdraw">
                全部提现
            </MobileButton>
        </div>

        <!-- 提现规则 -->
        <div v-if="ruleVisible" class="popup-container" @click="closePopup">
            <div class="popup toast white-bg" @click.stop>
                <div class="toast-content">
                    <div class="title">提现规则</div>
                    <div class="text-normal hint">
                        <div>1、发起提现后需平台审核，48小时内审核通过即可到账。</div>
                        <div>2、国家政策要求，代扣税费6%。</div>
                    </div>
                </div>
                <div class="btn-wrap text-center">
                    <button class="btn btn-mobile btn-red btn-large btn-block btn-rect" @click="onClickCloseRule">
                        知道了
                    </button>
                </div>
            </div>
        </div>

        <!-- 提现-赠送好友 -->
        <div v-if="searchProsonalVisible" class="popup-container" @click="closetip">
            <div class="popup toast white-bg" style="width:600rpx;" v-if="searchfriendBox" @click.stop>
                <div class="toast-content" style="width:600rpx;">
                    <div class="title" style="font-size:34rpx">搜索</div>
                    <div class="hint" style="position: relative;" :class="searchBoxState && showSelect ? 'heightBox2': ''">
                        <div class="personalSearch_box" style="justify-content: space-between;align-items: center;">
                            <input type="text" v-model="searchFriend" class="personalSearch_box_inp" placeholder="微信昵称/姓名/电话">
                        </div>
                        <!-- 查找好友结果 -->
                        <div class="searcResultBox" style="top:80rpx;left:0%;width:100%;height:300rpx;" v-show="searchBoxState && showSelect">
                            <template v-if="searchResult.length > 0">
                                <div class="searcResultBox_item" style="color:#000;" v-for="(searItem,searIndex) in searchResult" :key="searIndex" @click="onSelectMendianName(searItem)">{{searItem.nickname}} <span v-if="searItem.name">({{searItem.name}})</span> </div>
                            </template>
                            <template v-else>
                                <div class="mall-index__empty" style="padding：0rpx;">暂无内容</div>
                            </template>
                        </div>
                    </div>
                </div>
                <div class="btn-wrap text-center">
                    <div class="buttom_btnBox">
                        <div class="buttom_btnBox_cacel" @click="closetip">取消</div>
                        <div class="buttom_btnBox_ok" style="color:#f4051a;" @click="getFriend">确定</div>
                    </div>
                </div>
            </div>

            <div class="popup toast white-bg" style="width:600rpx;" v-if="giveTip" @click.stop>
                <div class="toast-content" style="width:600rpx;padding: 40rpx 20rpx;">
                    <!-- <div class="title" style="font-size:34rpx">提示</div> -->
                    <div class="tipsTitle">
                        <span style="padding-right:10rpx;">
                            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/tipsIcon.png" style="width:35rpx;margin-top: -4rpx;" alt="">
                        </span>
                        <span>提示</span>
                    </div>
                    <div class="text-normal hint">
                        <div class="" style="box-sizing: border-box;padding: 0rpx 20rpx;text-align: center;">
                            您确定要将此笔订单提现金额赠予 
                            <span style="font-weight:bold;">
                                “<span>{{postFriend.nickname}}</span>”，
                                <span style="color:#f4051a">{{showPhone}}</span>
                            </span>转让一旦确认。将无法撤回。赠予之前请再次确认对方的身份信息。
                        </div>
                    </div>
                </div>
                <div class="btn-wrap text-center">
                    <div class="buttom_btnBox">
                        <div class="buttom_btnBox_cacel" @click="cacelGive">取消转让</div>
                        <div class="buttom_btnBox_ok" style="color:#f4051a;" @click="Ontransfer">确定转让</div>
                    </div>
                </div>
            </div>
            <!-- 转赠成功提示 -->
            <div class="popup toast white-bg" style="width:600rpx;" v-if="isShowpostSuccess" @click.stop>
                <div class="toast-content" style="width:600rpx;padding: 40rpx 20rpx;">
                    <div class="tipsTitle">
                        <span style="padding-right:10rpx;">
                            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/tipsIcon.png" style="width:35rpx;margin-top: -4rpx;" alt="">
                        </span>
                        <span>提示</span>
                    </div>
                    <div class="text-normal hint">
                        <div class="" style="box-sizing: border-box;padding: 0rpx 20rpx;text-align: center;">
                            您的这笔提现已成功转赠到 
                            <span style="font-weight:bold;">
                                “<span>{{postFriend.nickname}}</span>”
                                <!-- <span style="color:#f4051a">{{showPhone}}</span> -->
                            </span>的账户，将由<span style="font-weight:bold;">“{{postFriend.nickname}}”</span>申请提现，这笔提现不再显示在您的提现列表中。
                        </div>
                    </div>
                </div>
                <div class="btn-wrap text-center">
                    <button class="btn btn-mobile btn-red btn-large btn-block btn-rect" @click="postSuccessTip">
                        知道了
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import {
    isUndef,
    dateParse,
    dateFormat,
    placeholderImg,
    currency,
} from '@/lib/utils';
import { api } from '@/lib/api';
import store from '@/store';
import Popup from '@/components/popup/popup.vue';
import SlideNav from '@/components/nav/slideNav.vue';
import AccountItem from '@/features/user/accountItem.vue';
import WithdrawDetail from '@/features/user/withdrawDetail.vue';
import ListEmpty from '@/components/list/listEmpty.vue';
import { EMPTY_LIST, ROUTE_NAME } from '@/lib/constant';
import { Store } from 'vuex';

@Component({
    name: 'UserAccount',
    components: {
        Popup,
        SlideNav,
        AccountItem,
        WithdrawDetail,
        ListEmpty,
    },
})
export default class UserAccount extends Vue {
     public searchBoxState = false;
     public showSelect = false;
    // 点击某个门店
    public onSelectMendianName(_name){
        this.dianState = true;
        this.searchFriend = _name.nickname;
        this.postFriend = _name;
        this.searchBoxState = false;
        this.showSelect = false;
    }


    public ruleVisible = false;
    public tipVisiable = false;
    public tab: any = 'free';
    public nav: any = 'init';

    public navs: ValueText[] = [
        { value: 'init', text: '待审核' },
        { value: 'granted', text: '可提现' },
        { value: 'withdraw', text: '提现记录' },
    ];

    // 提现-赠送好友 提示框
    public searchProsonalVisible: any = false;
    // 搜索好友
    public searchfriendBox: any = false;
    // 赠送确认提示
    public giveTip: any = false;

    public searchFriend: any = '';
    public listId: any = '';
    public postFriend: any ={
        id: null,
        name: '',
        nickname: '',
        mobile: '',
    }
    //转赠成功提示
    public isShowpostSuccess = false;

    // 关闭弹窗
    public closetip(){
        this.searchProsonalVisible = false;
        this.giveTip = false;
        this.searchfriendBox = false;
        this.searchFriend = '';
        this.listId = '';
        this.dianState = false;
        this.postFriend ={
            id: null,
            name: '',
            nickname: '',
            mobile: '',
        }
        this.isShowpostSuccess = false;
    }
    // 赠送好友按钮
    public onGive(_id:any){
        this.searchProsonalVisible = true;
        this.giveTip = false;
        this.searchfriendBox = true;
        this.searchFriend = '';
        this.listId = _id;
    }
    // 取消赠送提示
    public cacelGive(){
        this.giveTip = false;
        this.searchfriendBox = true;
        this.dianState = false;
        this.postFriend ={
            id: null,
            name: '',
            nickname: '',
            mobile: '',
        }
        this.searchFriend = '';
    }
    
    public dianState: any = false;
    // 监听搜索好友
    @Watch('searchFriend')
    public onSearchChange(){
        if(!this.dianState){
            this.getSearchFriend()
            this.searchBoxState = true;
            this.showSelect = true;
        }else{
            this.searchBoxState = false;
            this.showSelect = false;
        }
        // this.getSearchFriend()
        if(!this.searchFriend){
            this.searchBoxState = false;
            this.showSelect = false;
            this.dianState = false;
        }
        

    }
    // 请求搜索好友
    public getFriend(){
        var that = this;
        if(!that.searchFriend){
            wx.showToast({
                title: '请输入搜索信息！',
                icon: 'none',
            });
            return;
        }
        if(!that.postFriend.id){
            wx.showToast({
                title: '请选择赠送的用户',
                icon: 'none',
            });
            return;
        }

        if(that.postFriend.id != that.userBasicInfo.id){
            setTimeout(function(){
                that.searchfriendBox = false;
                that.giveTip = true;
            },800)
        }else{
            wx.showToast({
                title: '不能赠送用户自己！',
                icon: 'none',
            });
        }

    }

    public get searchResult(){
        return store.state.user.searchFriend;
    }
    public get showPhone(){
        let phone = '';
        if(this.postFriend.mobile){
            phone = this.postFriend.mobile;
            phone = '绑定电话为' + phone.substring(0,3) + '****' + phone.substr(7,4) + '吗？'
        }else{
            phone = '当前用户未绑定手机号，';
        }
        
        return phone;
    }

    // // 搜索好友请求
    public async getSearchFriend(){
        await store.dispatch('user/getSearchFriend', {
            search: this.searchFriend,
            offset: 0,
            count:5
        });
    }
// 转赠好友提交
    public async Ontransfer(){
        store.commit('utils/startRequest');
        const res = await store.dispatch('user/postTransfer', {
            user_id: this.postFriend.id,
            id: this.listId
        });
        if (res.status == 0) {
            // wx.showToast({
            //     title: '转赠成功',
            //     icon: 'success',
            // });
            this.giveTip = false;
            this.isShowpostSuccess = true;
            // setTimeout(() => {
            //     this.closetip();
            //     this.searchProsonalVisible = false;
            //     this.giveTip = false;
            //     this.searchfriendBox = false;
            //     this.searchFriend = '';
            //     this.listId = '';
            //     this.postFriend = {
            //         id: null,
            //         name: '',
            //         nickname: '',
            //         mobile: '',
            //     }
            //     // 
            // }, 1500);
            store.dispatch('user/getAccount'),
            store.dispatch('user/getAccountRank'),
            this.getData(0)
        } else {
            wx.showToast({
                title: '转赠失败',
                icon: 'success',
            });
            store.commit('utils/endRequest');
        }
        store.commit('utils/endRequest');
    }

    // 转赠成功提示
    public postSuccessTip(){
            this.closetip();
            this.searchProsonalVisible = false;
            this.giveTip = false;
            this.searchfriendBox = false;
            this.searchFriend = '';
            this.listId = '';
            this.postFriend = {
                id: null,
                name: '',
                nickname: '',
                mobile: '',
            };
            this.isShowpostSuccess = false;

    }

    // Y-m-d格式
    public date1 = '';

    // Y-m-d格式
    public date2 = '';

    /** 用户基础信息 */
    public get userBasicInfo() {
        return store.state.user.basicInfo;
    }
    /** 账户信息 */
    public get account() {
        return store.state.user.account;
    }
    /** 平台最强 */
    public get accountRank() {
        return store.state.user.accountRank;
    }

    public get withdrawList() {
        return store.state.user.withdrawList;
    }

    public get rebateDetailListMap() {
        return store.state.user.rebateDetailListMap;
    }
    // unlockDetailListMap: state => state.unlockDetailListMap,

    public get accountCurrency() {
        return this.account ? currency(this.account) : 0;
    }

    public get accountRankCurrency() {
        return this.accountRank ? {
            max: currency(this.accountRank.max),
            rank: this.accountRank.rank,
        } : null;
    }

    public get wrap() {
        return this.rebateDetailListMap;
    }

    public get status() {
        return this.nav === 'init' ? 'init' : this.nav === 'granted' ? 'issued' : undefined;
    }

    public get key() {
        return `${this.date1}_${this.date2}_${this.status}_undefined_undefined`;
    }

    public get list() {
        return this.nav === 'withdraw' ? (this.withdrawList.list || []) : (this.wrap[this.key] || EMPTY_LIST).list;
    }

    public get date1Show() {
        return this.date1 !== '' ? dateFormat(dateParse(this.date1), 'm.d') : '起始';
    }

    public get date2Show() {
        return this.date2 !== '' ? dateFormat(dateParse(this.date2), 'm.d') : '结束';
    }

    @Watch('nav')
    public onNavChange() {
        this.getData(0);
    }

    public onClickTab(type: any) {
        this.tab = type;
        this.getData(0);
    }
    public onConfirm() {
        this.tipVisiable = false;
    }
    public async getData(offset: number) {
        if (this.nav === 'init' || this.nav === 'granted') {
            await store.dispatch('user/getRebateDetailList', {
                startDate: this.date1,
                endDate: this.date2,
                offset: isUndef(offset) ? this.list.length : offset,
                count: 10,
                status: this.status,
                forceUpdate: offset === 0,
            });
        } else {
            await store.dispatch('user/getWithdrawDetail', {
                offset: isUndef(offset) ? this.list.length : offset,
                count: 10,
                forceUpdate: offset === 0,
            });
        }
    }
    /**
     * 点击提现
     */
    public onClickWithdraw() {
        // wx.navigateTo({
        //     url: '/pages/user_withdraw_apply/main',
        // });
        api.push({
            name: ROUTE_NAME.USER_WITHDRAW_APPLY,
        });
    }
    /**
     * 点击右上角提现规则
     */
    public onClickQuestion() {
        this.ruleVisible = true;
    }
    public onClickCloseRule() {
        this.ruleVisible = false;
    }
    public onReachBottom() {
        this.getData(this.list.length);
    }

    public async mounted() {
        window.addEventListener('reachbottom', this.onReachBottom);

        store.commit('utils/startRequest');
        const today = new Date();
        this.date2 = this.date1 = dateFormat(today, 'Y-m-d');
        await Promise.all([
            store.dispatch('user/getAccount'),
            store.dispatch('user/getAccountRank'),
            this.getData(0),
        ]);
        store.commit('utils/endRequest');
    }
    public beforeDestroy() {
        window.removeEventListener('reachbottom', this.onReachBottom);
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-my-account {
    min-height: 100%;
    padding-bottom: 65px;
    box-sizing: border-box;

    .heightBox2{
        height: 380rpx;
    }

    .personalSearch_box{
        width: 100%;
        margin: 10rpx auto;
    }
    .searcResultBox{
        position: absolute;
        top: 55px;
        left: 4%;
        width: 92%;
        height: 666rpx;
        background-color: #ffffff;
        box-shadow: 4rpx 4rpx 4rpx #b3b3b3;
        border-radius: 10rpx;
        padding: 20rpx 10rpx;
        box-sizing: border-box;
        overflow: hidden;
        overflow-y: scroll;
        z-index: 1;
        .searcResultBox_item{
            width: 100%;
            height: 40rpx;
            line-height: 40rpx;
            border-bottom: 1rpx solid #ccc;
            color: #676767;
            padding: 25rpx;
        }

    }
    .tipsTitle{
        text-align: center;
        font-weight: 700;
        box-sizing: border-box;
        font-size:34rpx;
        color:#f4051a;
        padding-bottom: 40rpx;
    }
    .personalSearch_box_inp{
            width: 100%;
            height: 70rpx;
            line-height: 70rpx;
            text-align: center;
            background-color: #f4f5f7;
        }
        .buttom_btnBox{
            width: 100%;
            height: 80rpx;
            font-size: 34rpx;
            display: flex;
            background-color: #ffffff;
            border-top: 1rpx solid #999999;
        }
        .buttom_btnBox_cacel{
            width: 50%;
            height:80rpx;
            line-height: 80rpx;
            color: #000;
            text-align: center;
        }
        .buttom_btnBox_ok{
            color: #2f72a9;
            width: 50%;
            height:80rpx;
            line-height: 80rpx;
            text-align: center;
            box-sizing: border-box;
            border-left:1rpx solid #cbcbc9;
        }
    

    .tabbox {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        .btn {
            width: 45%;
            &.red-color {
                color: @color-red;
            }
        }
    }
    .info-wrap {
        position: relative;
        background-color: @color-red;
        padding: 33px 10px 0;
        box-sizing: border-box;
        color: @white-color;
        .money {
            padding-bottom: 18px;
            border-bottom: 1px solid #FFA4A4;
        }
        .tips {
            padding: 10px 0;
        }
        .number {
            font-size: 36px;
        }
        .question-icon {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
        }
    }
    .list-wrap {
        .nav-wrap {
            border-bottom: 1px solid #bbb;
            .nav-item {
                padding: 10px;
                box-sizing: border-box;
                &.active {
                    border-bottom: 1px solid @color-red;
                }
            }
        }
    }
    .time-picker {
        padding: 13px 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        color: #9B9B9B;
    }

    .tip-popup {
        .popup-center {
            padding: 18px 30px 30px;
        }
        .title {
            font-size: 20px;
        }
        .tipsSuccessicon{
            width: 50rpx;
            height: 50rpx;
            margin: 10rpx 4rpx 0rpx 0rpx;
        }
    }
    .picker-wrap {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding-top: 3px;
        box-sizing: border-box;
       .picker {
            border: 1px solid #BBB;
            border-radius: 4px;
            line-height: 17px;
            min-width: 37px;
            font-size: 12px;
            text-align: center;
       }
    }

    .fixed-btn-wrap {
        padding: 10px 20px;
        // z-index: 100;
    }
}

</style>
